<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../../day23-jQuery/jquery.min.js"></script>
    <!-- 1. 引入  js -->
    <script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>
</head>

<body>
    <ul></ul>
    <ol></ol>
    <h1></h1>
    <!-- 2.创建模板 -->
    <script type="text/html" id="tpl-game">
        
        <li>{{game}}</li>
        <li>{{age}}</li>
        <li>彭于晏</li>
        <li>彭于</li>
        <li>彭</li>
    </script>

    <script>
        /* 
        模板引擎 ： 数据和 H5 代码的分离， 体现模块化思想

        模板引擎 art-template
        中文官网 : https://www.kancloud.cn/lanju/art-template/1500276
        使用步骤 ：
            1. 引入 js
            2. 创建模板(在模板里， 书写 H5 代码)
            3. 给模板绑定数据
            4. 获取绑定的数据，并渲染
            5. 返回模板引擎的内容

        语法：
           template(参数1，参数2)
               参数1： 模板的 id
               参数2： 提供的数据
               处理 ： 模板和数据进行绑定
               输出 ： 模板的内容(H5 代码)
        */
        //    3. 绑定数据
        let result = template('tpl-game', {
            game: '魔兽世界',
            age:'35',
        });
        console.log(result);
        $('ul').html(result);
        $('ol').html(result)
    </script>
</body>

</html>